<script lang="ts" setup>
import pagination from "./pagination.vue"
import {ref} from "vue"
import {getOrderL, orderTake, orRef} from "../serve"
import {useRouter} from 'vue-router'
import {ElMessageBox, ElMessage} from "element-plus";

const
    visible = ref(false),
    router = useRouter(),
    fromData = ref({
      page: 1,
      size: 5,
      orderId: '',
      status: '',
    }),
    load = ref(false),
    itemData: any = ref({list: []}),
    fromRefund = ref({orderId: '', isAgree: true})
;

function get() {
  getOrderL({...fromData.value}).then((r:any)=>{
    itemData.value = r
  })
}

get()


function sizeChange(size: number) {
  fromData.value.size = size
  get()
}

function currentChange(currPage: number) {
  fromData.value.page = currPage
  get()
}

function editChange(id: string) {
  router.push({path: '/info-order', query: {id}}).catch(() => true)
}
function orderTakeChange(id:any) {
  ElMessageBox.confirm('是否确定收货？','温馨提示').then(()=>{
    orderTake(id).then(()=>{
      ElMessage({type:'success',message:'确定收货成功！',duration:1500})
      get()
    })
  }).catch(()=>true)
}
function refundChange(id:any) {
  ElMessageBox.confirm('是否确定申请退款？','温馨提示').then(()=>{
    orRef(id).then(()=>{
      ElMessage({type:'success',message:'退款申请成功！',duration:1500})
      get()
    })
  }).catch(()=>true)
}
</script>

<template>
  <el-scrollbar>
    <el-card>
      <div slot="header">
        <el-form-item label="订单状态：">
          <el-radio-group v-model="fromData.status" @change="get">
            <el-radio-button :label="''">全部</el-radio-button>
            <el-radio-button :label="0">待发货</el-radio-button>
            <el-radio-button :label="1">待收货</el-radio-button>
            <el-radio-button :label="2">已收货</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-input v-model="fromData['orderId']" placeholder="请输入订单号搜索" style="width: 300px;">
          <template #append>
            <el-button icon="Search" @click="get"/>
          </template>
        </el-input>
      </div>
    </el-card>
    <el-card>
      <el-table v-loading="load" :data="itemData['list']"
                :header-cell-style="{ fontWeight: 'bold' }" element-loading-text="加载中..." size="small">
        <el-table-column align="center" label="订单id" min-width="100" prop="id"/>
        <el-table-column align="center" label="是否支付" min-width="80" prop="paid">
          <template #default="s">{{ s.row.paid == 0 ? '否' : '是' }}</template>
        </el-table-column>
        <el-table-column align="center" label="支付金额" prop="payPrice" width="80"/>
        <el-table-column align="center" label="支付时间" min-width="130" prop="createTime"/>
        <el-table-column align="center" label="商品数量" width="70" prop="createTime">
          <template #default="s">{{s['row']['products'].length}}</template>
        </el-table-column>
        <el-table-column align="center" label="收货姓名" min-width="80" prop="realName"/>
        <el-table-column align="center" label="收货电话" min-width="80" prop="userPhone"/>
        <el-table-column align="center" label="收货地址" min-width="80" prop="userAddress" show-overflow-tooltip/>
        <el-table-column align="center" label="退款状态" min-width="80" prop="refundStatus">
          <template #default="s">
            {{ s.row.refundStatus == 0 ? '无' : (s.row.refundStatus == 1 ? '退款中' : '已退款') }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="60">
          <template #default="scope">
            {{
              scope['row']['status'] == 0 ? '待发货' : (scope['row']['status'] == 1 ? '待收货' : (scope['row']['status'] == 2 ? '已收货' : ''))
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template #default="s">
                        <el-button circle icon="More" @click="editChange(s['row']['id'])"/>
            <el-button v-if="s['row']['refundStatus'] == 0 && s['row']['status'] == 0" size="small"
                       @click="refundChange(s['row']['id'])">退款
            </el-button>
            <el-button v-if="s['row']['status'] == 1" size="small"
                       @click="orderTakeChange(s['row']['id'])">收货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <pagination :pageCurrent="itemData?.current" :pageSize="itemData?.size"
                    :small="true" :total="itemData?.total"
                    class="page" @size-change="sizeChange" @current-change="currentChange"/>
      </div>
    </el-card>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>